<?php defined('SYSPATH') OR die('No direct access allowed.'); ?>
<div class="ui-widget searchBox">
  <div class="ui-widget-header ui-corner-all page-header-text">Give us some details</div>
  <div class="ticketBox">
  	<p class="left-label">Ticket Number</p> 
  	<input type="text" id="ticketNum" class="search-field right-value ocean-glow"></input>
  </div>  
  <div class="journeyBox">
    <div style="width: 200px; float:left" id="sourceCityContainer">
    	<p class="left-label">From</p>
    	<input type="text" id="sourceCity" class="search-field-short search-field right-value ocean-glow" ></input>
    </div>
    <div style="width: 200px; float:left">
    	<p class="left-label">To</p>
    	<input type="text" id="destinationCity" class="search-field-short search-field right-value ocean-glow"></input>
    </div>
    <div style="float:left">
    	<p class="left-label">Date of Journey</p>
    	<div style="clear-fix"></div>
    	<input type="text" id="datepicker" class="search-field-short search-field right-value ocean-glow"></input>
    </div>
  </div>   
   
  <div class="clear-fix"></div>
  <div class="submit-clear-button-container">
  	<span style="margin-right: 10px;">
  		<button id="submitTravelDetails" class="button-wrapper"><a href="#" class="button ocean"> Get Your Bus </a></button>
  	</span>
  	<span>
  		<a href="#" id="clearall">I'll Re-enter</a>
  	</span>
  </div>
</div>
<script type="text/javascript">

	var ipSrcCity = $("input#sourceCity");
	var ipDestCity = $("input#destinationCity");
	var ipDate = $("#datepicker");
	
	function gotSource(data) {
		parseNPopulate(data, 'sourceCity', selectedSource);		
	}

	function selectedSource(data, ui){
		getDestinations(null, gotDestination);		
	}		

	function gotDestination(data){
		parseNPopulate(data, 'destinationCity', selectedDestination);
		$("input#destinationCity").focus();		
	}

	function selectedDestination() {
		$("#datepicker").focus();
	}

	function showErrorMessages(inputId) {
		console.debug("inside showerr", inputId);
		$(inputId).addClass('input-error-shadow');
		if (inputId == 'input#sourceCity')
			$('#sourceCityContainer').append("<div id='srcIpErrCont'><p class='error-message'>Enter the city name of your starting point.</p></div>");	
		if (inputId == 'input#destinationCity')
			$('#destinationCityContainer').append("<div id='destIpErrCont'><p class='error-message'>Enter the city name of your destination.</p></div>");	
		if (inputId == 'input#datepicker')
			$('#datepicker').append("<div id='dateIpErrCont'><p class='error-message'>Enter the date of your travel.</p></div>");	
		
	}
	
	function validateInputs() {
		if ( $("input#ticketNum").val() == "") {
			if (ipSrcCity.val() == "" || ipDestCity.val() == "" ||  ipDate.val() == "") {
				if (ipSrcCity.val() == "") {showErrorMessages("input#sourceCity");}
				if (ipDestCity.val() == "") {showErrorMessages("input#destinationCity");}
				if (ipDate.val() == "") {showErrorMessages("#datepicker");}
				return false;
			} 
		}
		return true;
		
	}

	function finalsearch() {
		if (!validateInputs()) {
			return ;
		}
		$( "#messageBox" ).dialog( "option", "title", 'Loading Bus Details');
		$( "#messageBox" ).dialog('open');

		selectedSource = $("input#sourceCity").val();
		selectedDestination = $("input#destinationCity").val();
		sourceid = allCitiesReverse[selectedSource];
		destid = allCitiesReverse[selectedDestination];
		
		$.ajax({url: 'index.php/welcome/selectBus/'+sourceid+'/'+destid, success: 
			function(data) {			
				$("#pageContent").html(data)
			}, dataType: 'text'})
	}
	
	function clearAllFields() {
		ipSrcCity.val("");
		ipDestCity.val("");
		ipDate.val("");
	}
	
	$(function() {
		$("#datepicker").datepicker({
			//onSelect: finalsearch,
			dateFormat: 'dd-M-yy' 
		});
		$("input#ticketNum").focus();
		getDestinations(null, gotSource);
		$("#submitTravelDetails").click(finalsearch);
		$("#clearall").click(clearAllFields);
		$('input#sourceCity').focus(function() {
			$(this).removeClass('input-error-shadow');
			$('#srcIpErrCont').remove();
		});
		$('input#destinationCity').focus(function() {
			$(this).removeClass('input-error-shadow');
			$('#destIpErrCont').remove();
		});
		$('input#datepicker').focus(function() {
			$(this).removeClass('input-error-shadow');
			$('#dateIpErrCont').remove();
		});
	});		
</script>